<script setup lang="ts">
import { useWebxRouteTabs, useWebxTable } from "@webxue/vue3-antdv-ui";
import { BaseApi } from "@/apis/base.api";
import { message } from "ant-design-vue";
import useCusRouter from "@/hooks/useCusRouter";

const { router } = useCusRouter();
const { addTab } = useWebxRouteTabs({ router });
const { searchForm, dataSource, columns, pagination, doRefresh, doSearch, doReset, doCreate, doUpdate, doDelete } = useWebxTable({
  searchForm:{
    name:""
  },
  tableColumns:[
    { title: "序号", dataIndex: "index", width: 80 },
    { title: "菜单组名称", dataIndex: "name", width: 120 },
    { title: "菜单组标识", dataIndex: "code", width: 120 },
    { title: "备注", dataIndex: "remark" },
    { title: "操作", dataIndex: "operate", width: 180 }
  ],
  async api(params){
    const response = await BaseApi.menuGroup.list({
      queryType:"all"
    });
    return Promise.resolve(response.data);
  },
  // 新增
  async onCreate() {
    addTab({
      title: "新增菜单组",
      href: `/menuGroup/form`,
      key: `create-menuGroup`,
    })
  },
  // 编辑
  async onUpdate(record) {
    addTab({
      title: "编辑菜单组-" + record.name,
      href: "/menuGroup/form?menuGroupId=" + record.id,
      key: "edit-menuGroup-" + record.id,
    })
  },
  // 删除
  async onDelete(record) {
    const response = await BaseApi.menuGroup.delete({ ids: record.id });
    if(response.success) {
      message.success("菜单移除成功");
      await doSearch();
    }
  }
});
</script>

<template>
  <div class="person-index flex flex-col gap-2">
    <!-- 查询条件 -->
    <WebxSearch
      :model="searchForm"
      @submit="doSearch"
      @reset="doReset"
    >
      <AFormItem label="关键词">
        <AInput v-model:value="searchForm.name" placeholder="请输入关键词" />
      </AFormItem>
    </WebxSearch>
    <!-- 表格 -->
    <WebxTable
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @refresh="doRefresh"
      rowKey="id"
      @create="doCreate"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
        <template v-if="column.dataIndex === 'code'"><ATag color="blue">{{ record.code }}</ATag></template>
        <template v-if="column.dataIndex === 'operate'">
          <div class="flex gap-2">
            <WebxBtn operate="edit" @click.stop="doUpdate(record)" />
            <WebxBtn operate="del" :modalContant="`确定要删除菜单组 ${record.name} 吗？`" @delete="() => doDelete(record)" />
          </div>
        </template>
      </template>
    </WebxTable>
  </div>
</template>

<style scoped lang="less"></style>
